<template>
  <center class="Course">
    <div class="courseHeader">
      <el-menu mode="horizontal">
        <el-menu-item index="1"><a @click="drawer=true" class="el-icon-s-fold"></a></el-menu-item>
        <el-menu-item index="2">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/Main' }">课堂</el-breadcrumb-item>
            <el-breadcrumb-item>{{selectedCourse.name}}</el-breadcrumb-item>
          </el-breadcrumb>
        </el-menu-item>
        <Tools></Tools>
      </el-menu>
    </div>
    <div class="courseBox1">
      <div class="courseBox1Name">
        <h1 style="color: white;font-weight: 500;text-align: left; margin-left: 7px;">{{selectedCourse.name}}</h1>
        <div class="courseBox1Div" style="width: 110px;"><a
          style="float: left;font-size: 13px;text-decoration: none;color: white;cursor: pointer">加课码：{{selectedCourse.code}}</a>
        </div>
        <div class="courseBox1Div" style="width: 80px;"><a @click="$router.push('/Classmates')" class="el-icon-user-solid"
                                                           style="float: left;font-size: 13px;margin-top: 3px;text-decoration: none;color: white">同学：{{selectedCourse.studentList.length}}</a>
        </div>
        <div class="courseBox1Div" style="width: 50px;"><a class="el-icon-tickets"
                                                           style="float: left;font-size: 13px;margin-top: 3px;padding-left: 5px;text-decoration: none;color: white;cursor: pointer">成绩</a>
        </div>
      </div>
    </div>
    <div class="courseBox2">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="课堂互动" name="first">
          <div style="width: 1100px;height: 360px;border: #9A9A9A solid 1px;padding: 40px">
            <button
              style="width: 130px;height: 50px;color: white;background-color: #9A9A9A;border: none;float: left;border-radius: 8px;margin-right: 20px">
              暂无同屏/直播
            </button>
            <button
              style="width: 100px;height: 50px;color: white;background-color: #9A9A9A;border:none;float: left;border-radius: 8px">
              暂无互动
            </button>
            <a style="float: right;display: inline-block"><img style="float: left"
                                                               src="https://www.ketangpai.com/Public/Home/img/preview1.png"><label
              style="float: left;margin-left: 4px">我的学习</label></a>
            <a style="float: right;margin-right: 20px"><img style="float: left;margin-top: 3px"
                                                            src="https://www.ketangpai.com/Public/Home/img/history.png"><label
              style="float: left;margin-left: 4px">我的互动</label></a>
            <textarea placeholder="发送弹幕到ppt" row="3000" cols="140"
                      style="margin-top: 20px;height: 150px;width: 1100px"></textarea>
            <div class="Chat">
              <el-button style="float: right;margin-left: 20px">发送</el-button>
              <div @click="Chatclass" id="courseBox2Bulletchat" class="courseBox2Bulletchat"></div>
            </div>
          </div>


        </el-tab-pane>
        <el-tab-pane label="作业" name="second">


          <div style="margin-bottom: 70px">
            <el-button style="float: left" @click="dialogVisible=true" v-show="currentUser.role=='teacher'">新增作业
            </el-button>
          </div>
          <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="32%"
            :before-close="handleClose">
            <el-form :model="workForm" status-icon :rules="rules" ref="workForm" label-width="100px"
                     class="demo-ruleForm">
              <el-form-item label="作业类型" prop="workType">
                <el-input v-model="workForm.workType" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="作业名称" prop="workName">
                <el-input v-model="workForm.workName" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="作业详情" prop="optDet">
                <el-input v-model="workForm.optDet" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="作业时间">
                <div class="block">
                  <span class="demonstration"></span>
                  <el-date-picker
                    v-model="value1"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
                </div>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm('workForm'),dialogVisible=false">确定</el-button>
                <el-button @click="dialogVisible=false">取消</el-button>
              </el-form-item>
            </el-form>
          </el-dialog>


          <div v-for="(work,i) in works" :key="i" class="homeWorkbox">
            <div class="homeWorkboxleft">
            <div class="homeWorkboxdiv1"><p>{{work.workType}}</p>
              <p>开始时间: {{work.startTime}}</p>
            </div>
            <div class="homeWorkboxdiv1">
              <a class="homeWorkboxdiv1a1" @click="turnPageTo(work)">{{work.workName}}</a>
            </div>
            <div class="homeWorkboxdiv1">
              <p style="padding-right: 150px">{{work.optDet}}</p>
            </div>
            <div class="homeWorkboxdiv1" style="color: #9A9A9A">
              <img width="18px" height="18px" style="float: left;margin-top: 17px;margin-left: 20px"
                   src="https://www.ketangpai.com/Public/Home/img/recruitment/ic_card_time@2x.png">
              <p style="margin-left: 3px">截至日期：{{work.endTime}}</p>
              <a class="homeWorkboxdiv1a2">0条讨论</a>
            </div>
            </div>
            <div class="homeWorkboxright">
              <div class="homeWorkboxrightTop">
                <div class="homeWorkboxrightTopbox">
                  <div class="homeWorkboxrightTopboxhead"><h2>总人数</h2></div>
                  <div class="homeWorkboxrightTopboxbottom"><h2>{{work.totalStudentIds.length}}</h2></div>
                </div>
                <div class="homeWorkboxrightTopbox">
                  <div class="homeWorkboxrightTopboxhead"><h2>未提交人数</h2></div>
                  <div class="homeWorkboxrightTopboxbottom"><h2>{{work.totalStudentIds.length-work.submittedStudentIds.length}}</h2></div>
                </div>
                <div class="homeWorkboxrightTopbox">
                  <div class="homeWorkboxrightTopboxhead"><h2>已提交人数</h2></div>
                  <div class="homeWorkboxrightTopboxbottom"><h2>{{work.submittedStudentIds.length}}</h2></div>
                </div>

              </div>
              <div v-show="currentUser.role=='student' && work.totalStudentIds.indexOf(currentUser.studentId)!=-1"  class="homeWorkboxrightBottom">
                 <el-button v-if="work.submittedStudentIds.indexOf(currentUser.studentId)==-1" @click="turnPageTo(work)">提交</el-button>
                <el-button  v-else >已提交</el-button>
              </div>
            </div>
          </div>


        </el-tab-pane>
        <el-tab-pane label="话题" name="third"></el-tab-pane>
        <el-tab-pane label="资料" name="fourth"></el-tab-pane>
        <el-tab-pane label="测试(考试)" name="fifth"></el-tab-pane>
        <el-tab-pane label="公告" name="sixth"></el-tab-pane>
      </el-tabs>
    </div>
    <el-drawer
      :visible.sync="drawer"
      direction="ltr"
    >
      <div style="width: 400px;height: 700px;">
        <div style="width: 400px;height: 60px;text-align: left;padding-left: 40px">课堂</div>
        <div style="width: 400px;height: 60px;text-align: left;padding-left: 40px">私信</div>
      </div>
    </el-drawer>
  </center>
</template>

<script>
  import Tools from "../../components/Tools";
  import http from "../../utils/http";

  export default {
    name: "Course",
    inject: ['reload'],
    data() {
      return {
        currentUser:this.$store.getters.getUser,
        selectedCourse:this.$store.getters.getCourse,
        addCode: '',
        m:true,
        dialogVisible: false,
        value1: [],
        courseGetAccount: "",
        show: false,
        studentNumber: 0,
        activeName: 'second',
        flag: true,
        drawer: false,
        course: [
          {
            coursename: '',
          }
        ],

        works: [
        ],
        workForm: {
          workType: '',
          workName: "",
          startTime: '',
          endTime: '',
          optDet:'',
          code: this.$cookies.get('addCode'),
        },
        rules: {
          workType: [
            {required: true, message: '请输入作业类型', trigger: 'blur'},
          ],
          workName: [
            {required: true, message: '请输入作业名称', trigger: 'blur'},
          ],
          startTime: [
            {required: true, message: '请输入作业类型', trigger: 'blur'},
          ],
          endTime: [
            {required: true, message: '请输入作业名称', trigger: 'blur'},
          ],
        }
      }

    },

    methods: {
      turnPageTo(work){
        if(this.currentUser.role=='student') {
          if (work.totalStudentIds.indexOf(this.currentUser.studentId) == -1) {
            this.$message.warning("在发布该作业时你还未加入，无需提交作业")
            return
          }
        }
        this.$router.push({
          path:"/operationDetails",
          query:{
            workId:work.id
          }
        })
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      getWorksList(){

        const _this=this
        http.get('course//getAllWorksByCode',{code: this.selectedCourse.code}).then(function (resp) {
          //回调函数中的this指的是回调
          //把data数据赋给_this，即vue对象
          _this.works = resp.data
          console.log(resp.data)
        })
      },

      test(value){
      },

      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          this.workForm.startTime = this.getTime(this.value1[0]);
          this.workForm.endTime = this.getTime(this.value1[1]);
          this.workForm.code=this.selectedCourse.code;
          if (valid) {
            http.post('teacher/addWork', this.workForm)
              .then((response) => {
                this.$message({
                  message: '增加作业成功',
                  type: 'success'
                });
                this.getWorksList()
              })
              .catch(function (error) {
                console.log(error);
              });
          } else {
            console.error("错误");
          }
        });
      },

      //时间格式化
      getTime(value) {
        const dt = new Date(value);
        var year = dt.getFullYear(); //年
        var month = dt.getMonth() + 1; //月
        var date = dt.getDate(); //日
        month = month < 10 ? "0" + month : month;
        date = date < 10 ? "0" + date : date;
        var str = year + "-" + month + "-" + date;
        return str;
      },

      handleClick(tab, event) {
        console.log(tab, event);
      },
      Chatclass() {
        if (this.flag) {
          document.getElementById('courseBox2Bulletchat').setAttribute('class', 'courseBox2Bulletchatactive');
          this.flag = false;
        } else {
          document.getElementById('courseBox2Bulletchat').setAttribute('class', 'courseBox2Bulletchat');
          this.flag = true;
        }
      },
    },
    created() {
      console.log(this.$store.getters.getCourse)
      this.getWorksList();
    },
    components: {
      Tools,
    }
  }
</script>

<style scoped>
  .courseHeader {
    width: 1520px;
    height: 61px;
  }

  .courseHeader .el-breadcrumb {
    line-height: 4;
  }

  .courseHeader el-submenu__icon-arrow {
    display: none !important;
  }

  .courseBox1 {
    width: 1224px;
    height: 200px;
    border: #9A9A9A solid 2px;
    margin-top: 40px;
    border-radius: 8px 8px 0 0;
    background: url("https://assets.ketangpai.com/theme/student/big/01.png") no-repeat;
    background-size: cover;
  }

  .courseBox1Name {
    width: 300px;
    height: 150px;
    float: left;
    margin-left: 40px;
    margin-top: 48px;
    color: white;
  }

  .courseBox1Div {
    background-color: rgba(255, 255, 255, .4);
    height: 20px;
    float: left;
    margin-left: 10px;
    text-decoration: none;
    color: white;
  }

  .courseBox1Div a:hover {
    text-decoration: underline !important;
  }
</style>
<style>
  .courseBox2 {
    width: 1224px;
    height: 72px;
    background-color: rgba(241, 243, 244, 1);
    border-radius: 0 0 8px 8px;
  }

  .courseBox2 .el-tabs__nav {

    margin-left: 50px;
    margin-top: 20px;
  }

  .courseBox2 .el-tabs__item {
    font-size: 20px;
    padding-bottom: 50px !important;
  }

  .courseBox2 .el-tab-pane {
    height: 600px !important;
    margin-top: 60px !important;
    float: left;
  }

  .courseBox2 .el-tabs__nav-wrap::after {
    height: 0px;
  }

  .Chat {
    width: 200px;
    height: 60px;
    margin-top: 20px;
    float: right;
  }

  .courseBox2Bulletchat {
    width: 40px;
    height: 40px;
    background: url("https://www.ketangpai.com/Public/Home/img/sendDanmu.png");
    float: right;
  }

  .courseBox2Bulletchatactive {
    width: 40px;
    height: 40px;
    background: url("https://www.ketangpai.com/Public/Home/img/no-sendDanmu.png");
    float: right;
  }

  .el-submenu__icon-arrow {
    display: none;
  }

  .homeWorkbox {
    width: 1220px;
    height: 191px;
    border: #9A9A9A solid 1px;
    border-radius: 8px;
    margin-bottom: 20px;
  }

  .el-drawer__wrapper {
    width: 1200px;
  }

  .courseHeader .el-menu--horizontal > .el-menu-item.is-active {
    border: none !important;
  }
  .homeWorkboxleft{
    width: 610px;
    height: 191px;
    float: left;
  }
  .homeWorkboxright{
    width: 600px;
    height: 191px;
    float: right;
  }
  .homeWorkboxrightTop{
    width: 600px;
    height: 150px;
  }
  .homeWorkboxrightTopbox{
    width: 196px;
    height: 150px;
    display: inline-block;
    text-align: center;
  }
  .homeWorkboxrightTopboxhead{
    width: 196px;
    height: 50px;
  }
  .homeWorkboxrightTopboxbottom{
    width: 196px;
    height: 40px;
  }
  .homeWorkboxrightBottom{
    width: 200px;
    height: 40px;
    margin-left: 400px;
  }
  .homeWorkboxdiv1 {
    width: 600px;
    height: 40px;
    float: left;
    padding-left: 30px;
  }
  .homeWorkboxdiv1 p {
    margin-left: 20px;
    float: left;
    font-size: 15px;
  }

  .homeWorkboxdiv1a1 {
    text-decoration: none;
    color: black;
    font-size: 21px;
    margin-left: 20px;
    padding-top: 15px;
    float: left;
    cursor: pointer;
  }

  .homeWorkboxdiv1a1:hover {
    color: #32BAF0;
    text-decoration: underline;
  }

  .homeWorkboxdiv1a2 {
    float: left;
    margin-left: 10px;
    margin-top: 15px;
    text-decoration: none;
    color: #9A9A9A;
    cursor: pointer;
  }

  .homeWorkboxdiv1a2:hover {
    color: #32BAF0;
  }
</style>
<style>
  .addWork .el-form-item__label {
    padding: 0 110px 0 0;
    float: none;
  }

  .addWork {
    background-color: ghostwhite;
  }

  .addWork .el-input__inner {
    width: 25%;
  }

  .addWork {
    position: absolute;
    width: 80%;
    right: 100px;
    border-radius: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
  }

  .el-tabs__content {
    /*overflow: auto!important;*/
    overflow: visible !important;
  }
</style>
